<template>
	<el-table :data="state.tableList" v-loading="state.loading" border>
		<el-table-column label="创建时间" align="center" prop="create_time" :formatter="formatterCreateTime" width="100" />
		<el-table-column label="当前进度" align="center" prop="step_info">
			<template #default="{ row }">
				<div style="white-space: pre-line">
					{{ formatterAfterState(row) }}{{ formatterAfterRefundAmount(row) }}
					<br />
					{{ formatterAfterDescri(row) }}
				</div>
			</template>
		</el-table-column>
		<el-table-column label="图片信息" align="center" prop="goods_title">
			<template #default="{ row }">
				<template v-if="row.images.length && row.images[0]">
					<el-avatar v-for="(item, index) in row.images" :key="index" :src="item" shape="square" @click="onImageViewer(row, index)" class="mr10" />
				</template>
				<span v-else>----</span>
			</template>
		</el-table-column>
		<el-table-column label="操作人" align="center" prop="operator" :formatter="formatterOperator" />
	</el-table>
	<el-image-viewer v-if="state.imageViewerShow" :initial-index="state.imageNum" @close="state.imageViewerShow = false" :url-list="state.imagesList" />
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { storeToRefs } from 'pinia';
import { supplierWithdrawalApi } from '/@/api/supplier';
import { supplierWithdrawalApi as supplierWithdrawalApi1 } from '/@/api';
import { useUserInfo } from '/@/stores/userInfo';
import { timeDictionary } from '/@/utils/dictionary';

const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo);
const SupplierWithdrawalApi = supplierWithdrawalApi();
const SupplierWithdrawalApi1 = supplierWithdrawalApi1();
const state = reactive({
	tableList: [],
	loading: true,
	imageViewerShow: false,
	imageNum: 0,
	imagesList: [],
	orderAfterInfo: {},
});

/********** 触发事件 **********/
// 预览图片
const onImageViewer = (row: any, index: number) => {
	state.imageViewerShow = true;
	state.imageNum = index;
	state.imagesList = row.images;
};
const onCancel = () => {
	state.tableList = [];
	state.loading = true;
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any) => {
	state.orderAfterInfo = row;
	state.loading = true;
	_withdrawalOrderAfterLog({ order_detail_id: row.order_detail_id });
};
// 创建时间字典
const formatterCreateTime = (row: any) => {
	return timeDictionary(row.create_time);
};
// 操作人
const formatterOperator = (row: any) => {
	// step：进度：1用户申请，2用户取消，3一审同意，4一审拒绝，5买家上传单号，6二审同意，7二审拒绝
	switch (row.step) {
		case 1:
		case 2:
		case 5:
			return '买家-' + row.apply_name;
		case 3:
		case 4:
		case 6:
		case 7:
			return '平台-' + row.admin_username;
		default:
			return '未知进度';
	}
};
// 售后状态
const formatterAfterState = (row: any) => {
	const info: any = state.orderAfterInfo;
	switch (row.step) {
		case 1:
			switch (info.after_type) {
				case 1:
					return '买家发起退款申请';
				case 2:
					return '买家发起退货申请';
				default:
					return '未知错误';
			}
		case 2:
			switch (info.after_type) {
				case 1:
					return '买家取消退款申请';
				case 2:
					return '买家取消退货申请';
				default:
					return '未知错误';
			}
		case 3:
			switch (info.after_type) {
				case 1:
					return '平台同意退款';
				case 2:
					return '平台同意退货，待买家上传快递单号';
				default:
					return '未知错误';
			}
		case 4:
			switch (info.after_type) {
				case 1:
					return '平台拒绝退款';
				case 2:
					return '平台拒绝退货';
				default:
					return '未知错误';
			}
		case 5:
			return '买家已上传快递单号，待卖家审核';
		case 6:
			return '平台同意退货';
		case 7:
			return '平台拒绝退货';
		default:
			return '未知进度';
	}
};
// 售后用户原因/平台同意说明/平台拒绝原因
const formatterAfterDescri = (row: any) => {
	switch (row.step) {
		case 1:
		case 4:
		case 7:
			return row.descri ? `原因：${row.descri}` : '';
		case 2:
			return '';
		case 3:
		case 6:
			return row.descri ? `描述：${row.descri}` : '';
		case 5:
			const info = row.descri.split(',');
			return row.descri ? `快递公司：${info[0]};\n快递单号：${info[1]}` : '';
		default:
			return '未知进度';
	}
};
// 售后退款金额
const formatterAfterRefundAmount = (row: any) => {
	const info: any = state.orderAfterInfo;
	if (row.step === 3 || row.step === 6) {
		switch (info.refund_type) {
			case 1:
				return `，退全款（${info.refund_amt}元）`;
			case 2:
				return `，退部分款（${info.refund_amt}元）`;
			default:
				return '';
		}
	} else {
		return '';
	}
};

/********** 网络请求 **********/
// 售后记录
const _withdrawalOrderAfterLog = (params: Object) => {
	let Api:any = SupplierWithdrawalApi;
	if (userInfos.value.supplier_id) {
		Api = SupplierWithdrawalApi;
	} else {
		Api = SupplierWithdrawalApi1;
	}
	Api.withdrawalOrderAfterLog(params)
		.then((res:any) => {
			state.tableList = res.data.list.map((item: any) => {
				return {
					...item,
					images: item.images.split(','),
				};
			}).reverse();
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog, onCancel });
</script>
